<template>
  <view class>
    <form class="login-form">
      <view class="cu-form-group margin-top">
        <view class="title">集团名称</view>
        <input placeholder="请选择集团" :value="mainOrder.GROUPNAME" disabled />
        <!-- <text class='cuIcon-same text-orange'></text> -->
      </view>
      <view class="cu-form-group">
        <view class="title">组织名称</view>
        <input placeholder="请选择组织" :value="mainOrder.ORGNAME" disabled />
        <!-- <text class='cuIcon-same text-blue'></text> -->
      </view>
      <view class="cu-form-group">
        <view class="title">仓库</view>
        <input
          placeholder="请选择仓库"
          :value="mainOrder.STORENAME"
          disabled
          @tap="searchFn('BD_STORE')"
        />
        <button class="cu-btn bg-green shadow" @tap="openScan('STORE')">扫一扫</button>
      </view>

      <view class="cu-form-group">
        <view class="title">货位</view>
        <input placeholder="请选择货位" :value="mainOrder.RACKNAME" disabled @tap="searchFn('BD_RACK')" />
        <button class="cu-btn bg-green shadow" @tap="openScan('STATION')">扫一扫</button>
      </view>

      <view class="cu-form-group">
        <view class="title">货区</view>
        <input placeholder="请扫描货区" :value="mainOrder.STOREAREANAME" disabled />
        <button class="cu-btn bg-green shadow" @tap="openScan('STOREAREA')">扫一扫</button>
      </view>
      <view class="cu-form-group">
        <view class="title">货架</view>
        <input placeholder="请扫描货架" :value="mainOrder.STORESHELVESNAME" disabled />
        <!-- <text class='cuIcon-same text-blue' @tap="openScan('STORESHELVES')"></text> -->
        <button class="cu-btn bg-green shadow" @tap="openScan('STORESHELVES')">扫一扫</button>
      </view>
      <view class="cu-form-group">
        <view class="title">货层</view>
        <input placeholder="请扫描货层" :value="mainOrder.STORELAYERNAME" disabled />
        <!-- <text class='cuIcon-same text-blue' @tap="openScan('STORELAYER')"></text> -->
        <button class="cu-btn bg-green shadow" @tap="openScan('STORELAYER')">扫一扫</button>
      </view>

      <view class="cu-form-group">
        <view class="title">备注</view>
        <input placeholder="请输入备注" name="input" v-model="mainOrder.VMEMO" />
      </view>
    </form>

    <view class="mater-list">
      <view class="mater-item" v-for="(item ,index) in checkOrder" :key="index">
        <view class="cu-form-group">
          <view class="title">名称：</view>
          <view>{{ item.VNAME || item.MATERIALNAME }}</view>
        </view>
        <view class="cu-form-group">
          <view class="title">规格：</view>
          <view>{{ item.MATSPEC || '' }}</view>
        </view>
        <view class="cu-form-group">
          <view class="title">库存数量：</view>
          <view>{{ item.KNUM || '' }} ({{ item.UNIT || '' }})</view>
        </view>
        <view class="cu-form-group">
          <view class="title">盘点数量</view>
          <input @blur="getPDNun($event,index)" v-model="item.NNUM" class="bottom-border" />
        </view>

        <view class="cu-form-group">
          <view class="title">盈亏数量</view>
          <view>{{ item.PYKNUM }}</view>
        </view>
      </view>
    </view>

    <view class="btn-area padding">
      <button hover-class="e-hover-btn" class="login-btn bg-blue" @click="submitForm">提交</button>
    </view>
  </view>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import api from "@/common/api.js";
import utils from "@/common/util.js";
let _self, activeType;
export default {
  computed: mapState(["userInfo", "baseUrl"]),
  data() {
    return {
      list: [],
      checkOrder: [],
      mainOrder: {
        BILLNO: "",
        // 返回 PK_ORG(组织id),ORGNAME(组织名称), PK_STORE（仓库id），STORENAME（仓库名称）
        // PK_STATION(货位ID)，STATIONNAME（货位名称）:'',
        PK_GROUP: "",
        GROUPNAME: "",
        PK_ORG: "",
        ORGNAME: "",
        PK_STORE: "",
        STORENAME: "",
        PK_STATION: "",
        STATIONNAME: "",
        PK_STOREAREA: "", // 货区id
        STOREAREANAME: "", // 货区id
        PK_STORESHELVES: "", // 货架id
        STORESHELVESNAME: "", // 货架id
        PK_STORELAYER: "", // 货层
        STORELAYERNAME: "", // 货层
        BDATAFROM: 1,
        PK_RACK: "",
        RACKNAME: "",
        PK_INVER: "",
        INVER: "",
        VMEMO: "",
        account: "",
        userId: ""
      }
    };
  },
  onLoad(p) {
    _self = this;
    this.initSetData();
    // _self.mainOrder.account = _self.userInfo.Account;
    // _self.mainOrder.userId  = _self.userInfo.UserId;
    // _self.mainOrder.INVER = _self.userInfo.Account;
    // _self.mainOrder.PK_INVER  = _self.userInfo.UserId;
    let abc = JSON.parse(decodeURIComponent(p.data));
    abc.map(item => {
      item.PYKNUM = 0;
      return item;
    });
    _self.checkOrder = abc;
    // console.log(this.userInfo);
  },
  onShow() {
    uni.$on("getSelectItem", function(data) {
      // console.log(data);
      // console.log(activeType);
      switch (activeType) {
        case "BA_STOREAREA": // 货区
          _self.mainOrder.STOREAREANAME = data.FullName;
          _self.mainOrder.PK_STOREAREA = data.OrganizeId;
          break;
        case "BA_ORGANIZE":
          _self.mainOrder.ORGNAME = data.FullName;
          _self.mainOrder.PK_ORG = data.OrganizeId;
          break;
        case "BA_DEPARTMENT":
          _self.mainOrder.DEPTNAME = data.FullName;
          _self.mainOrder.PK_DEPT = data.OrganizeId;
          break;
        case "BD_RACK":
          _self.mainOrder.RACKNAME = data.VNAME;
          _self.mainOrder.PK_RACK = data.BILLNO;
          break;
        case "BA_USER":
          _self.mainOrder.APPLYER = data.RealName;
          _self.mainOrder.PK_APPLYER = data.UserId;
          break;
        case "BD_STORE": // 仓库
          _self.mainOrder.PK_STORE = data.BILLNO;
          _self.mainOrder.STORENAME = data.VNAME;
          break;
        default:
          break;
      }
    });
  },

  methods: {
    // 初始化赋值
    initSetData() {
      _self.mainOrder.GROUPNAME = _self.userInfo.GROUPNAME || "";
      _self.mainOrder.PK_GROUP = _self.userInfo.PK_GROUP;
      _self.mainOrder.ORGNAME = _self.userInfo.ORGNAME;
      _self.mainOrder.PK_ORG = _self.userInfo.ORGANIZEID;
      _self.mainOrder.DEPTNAME = _self.userInfo.DEPTNAME;
      _self.mainOrder.PK_DEPT = _self.userInfo.DEPARTMENTID;
      _self.mainOrder.APPLYER = _self.userInfo.Account;
      _self.mainOrder.PK_APPLYER = _self.userInfo.UserId;
      _self.mainOrder.userId = _self.userInfo.UserId;
      _self.mainOrder.account = _self.userInfo.Account;
    },
    // 计算盈亏数量
    getPDNun(e, i) {
      let val = e.target.value;
      // console.log(val);
      _self.checkOrder[i].PYKNUM = val - _self.checkOrder[i].KNUM;
    },

    searchFn(t) {
      activeType = t;
      let queryParames = ""; // JSON.stringify({PK_STORE:this.mainOrder.PK_STORE});
      switch (activeType) {
        // case 'BA_ORGANIZE':
        // 	queryParames = { PK_GROUP: _self.mainOrder.PK_GROUP }
        // 	break;
        case "BA_DEPARTMENT":
          queryParames = { PK_ORG: _self.mainOrder.PK_ORG };
          break;
        case "BD_STORE": // 仓库
          queryParames = { PK_ORG: _self.mainOrder.PK_ORG };
          break;
        case "BD_RACK": // 货位
          queryParames = { PK_STORE: _self.mainOrder.PK_STORE };
          break;
        case "BA_STOREAREA": // 货区
          queryParames = { PK_STORE: _self.mainOrder.PK_STORE, GDTYPE: "0" };
          break;
        default:
          break;
      }
      queryParames = JSON.stringify(queryParames);
      uni.navigateTo({
        url: "/pages/public/search?t=" + t + "&queryjson=" + queryParames
      });
    },
    submitForm() {
      let saveData = {
          ..._self.mainOrder,
          Detail: JSON.stringify(_self.checkOrder)
        },
        saveURL = api.apiPublic.checkListSubmit;
      // console.log(saveURL);
      // console.log(JSON.stringify(saveData));
			this.axios({
				url: saveURL ,
				data: quesaveURLry ,
				isLoading: 1
			}).then(res=>{
				let { Result } = res ;
				utils.tips("提交成功");
				utils.delayBack();
			})
    },

    openScan(id, index) {
      uni.scanCode({
        onlyFromCamera: true,
        success: function(res) {
          // console.log(res)
          if (res.scanType != "QR_CODE") {
            return uni.showToast({
              icon: "none",
              title: "类型错误，请重新扫描"
            });
          }
          let t = res.result.replace(/'/g, '"');
          let data = JSON.parse("{" + t + "}");
          let sid = "PK_" + id,
            sname = id + "NAME";
          // console.log(sid);
          // console.log(sname);
          if (id == "STORE") {
            // 仓库
            _self.mainOrder.PK_STORE = data.PK_STORE;
            _self.mainOrder.STORENAME = data.STORENAME;
          } else if (id == "STATION") {
            // 货位
            _self.mainOrder[sname] = data[sname];
            _self.mainOrder[sid] = data[sid];
          } else if (id == "STOREAREA") {
            // 货区
            _self.mainOrder[sname] = data.STATIONNAME;
            _self.mainOrder[sid] = data.PK_STATION;
          } else if (id == "STORESHELVES") {
            //货架
            _self.mainOrder[sname] = data.STATIONNAME;
            _self.mainOrder[sid] = data.PK_STATION;
          } else if (id == "STORELAYER") {
            //货层
            _self.mainOrder[sname] = data.STATIONNAME;
            _self.mainOrder[sid] = data.PK_STATION;
          }
        }
      });
    }
  }
};
</script>

<style scoped>
.cu-form-group .title {
  min-width: calc(4em + 15px);
}
.mater-item {
  width: 680rpx;
  padding: 20rpx 10rpx;
  margin: 10rpx auto;
  background-color: #ffffff;
  border-radius: 16rpx;
}
.bottom-border {
  border-bottom: 1rpx solid #007aff;
  text-align: right;
}

.bottom-border {
  text-align: left;
}
.bottom-border:focus-within {
  border-bottom: 1rpx solid #007aff;
}
</style>
